<script setup lang="ts">
defineOptions({
  name: "bordBarchart"
});
import { ref, computed, onMounted } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import type { LabelLayoutFunctionType, EchartsInstanceFunctionType } from "@/views/common/components/types";
import modelTitle from "@/views/common/components/modelTitle/index.vue";

interface Props {
  /**  获取当前echarts实例对象，参数为实例对象和回调函数 */
  getEchartsInstance?: EchartsInstanceFunctionType | null;
  /**  获取 optiins 配置函数 */
  labelLayoutFn?: LabelLayoutFunctionType | null;
  /**  同 echarts option */
  options?: CommonEcharts.CommonEchartsOption | null;
  /**  有 title 时传入 */
  title?: string;
  /**  单位 */
  unit?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  imageSize?: number;
  /**  数据列表 */
  dataList?: any;
  timeFrame?: any;
}

interface Emits {
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const echartsKey = ref<string>(Math.random().toString(36).slice(2, 10));
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);

const props = withDefaults(defineProps<Props>(), {
  width: 667,
  height: 167,
  imageSize: 100
});

// 年度实际
const annualActual = computed(() => props.dataList.annualActual);
// 年度预测
const annualPrediction = computed(() => props.dataList.annualPrediction);
const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);
const itemTitle = computed(() => `${props.title.indexOf("年") !== -1 ? "月" : "日"}`);
const currentYear = props.timeFrame;
const currentMonth = new Date().getMonth();
const valueFormat = Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2));

const sliceMonth = month => {
  let monthStr = month?.slice(-2);
  if (monthStr?.[0] === "0") {
    return monthStr?.[1] ?? "-";
  } else {
    return monthStr ?? "-";
  }
};
onMounted(() => {
  emits("request-data");
});
</script>

<template>
  <div class="energy-desk-content">
    <div class="header">
      <modelTitle v-if="title" class="header-title" :title="title" />
      <div class="unit">单位：{{ unit }}</div>
    </div>
    <div class="energy-desk-content-list">
      <div class="content-item">
        <div class="item-title" />
        <div class="item-header">{{ currentYear + "年度预测：" }}</div>
        <div class="item-header">{{ currentYear + "年度实际：" }}</div>
      </div>
      <div class="content-item">
        <div class="item-title">能源消耗</div>
        <div class="item-number">{{ annualPrediction.energyCost }}</div>
        <div class="item-number">{{ annualActual.energyCost }}</div>
      </div>
      <!-- <div class="content-item">
        <div class="item-title">环比/同比</div>
        <div class="item-number item-flex" :style="{ color: Number(annualPrediction.simOrCirRadio) > 0 ? '#FF0000' : '#34D399' }">
          {{ `${annualPrediction.simOrCirRadio || "--"}%` }}
          <px-icon v-if="Number(annualPrediction.simOrCirRadio) > 0">
            <Top />
          </px-icon>
          <px-icon v-if="Number(annualPrediction.simOrCirRadio) < 0">
            <Bottom />
          </px-icon>
        </div>
        <div class="item-number item-flex" :style="{ color: Number(annualActual.simOrCirRadio) > 0 ? '#FF0000' : '#34D399' }">
          {{ `${annualActual.simOrCirRadio || "--"}%` }}
          <px-icon v-if="Number(annualActual.simOrCirRadio) > 0">
            <Top />
          </px-icon>
          <px-icon v-if="Number(annualActual.simOrCirRadio) < 0">
            <Bottom />
          </px-icon>
        </div>
      </div> -->
      <div class="content-item">
        <div class="item-title">{{ itemTitle }}平均消耗</div>
        <div class="item-number">{{ annualPrediction.monthAvgCost }}</div>
        <div class="item-number">{{ annualActual.monthAvgCost }}</div>
      </div>
      <div class="content-item">
        <div class="item-title">{{ itemTitle }}最大消耗量</div>
        <div class="item-number item-flex">
          {{ sliceMonth(annualPrediction.monthMax) + "月: " + annualPrediction.monthMaxCost }}
        </div>
        <div class="item-number item-flex">
          {{ sliceMonth(annualActual.monthMax) + "月: " + annualActual.monthMaxCost }}
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">{{ itemTitle }}最小消耗量</div>
        <div class="item-number item-flex">
          {{ sliceMonth(annualPrediction.monthMin) + "月: " + annualPrediction.monthMinCost }}
        </div>
        <div class="item-number item-flex">
          {{ sliceMonth(annualActual.monthMin) + "月: " + annualActual.monthMinCost }}
        </div>
      </div>
    </div>
    <div class="echarts-chart-com">
      <echartsCom ref="echartsComRef" :key="echartsKey" :getEchartsInstance="getEchartsInstance" :labelLayoutFn="labelLayoutFn" :options="options" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  box-sizing: border-box;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  min-height: v-bind(min_height);
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;

  .header {
    display: flex;
    align-items: center;

    .header-title {
      width: 200px;
      background-size: 100%;
    }

    .unit {
      margin-left: 10px;
    }
  }

  .energy-desk-content-list {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    justify-content: space-between;
    // margin-bottom: 16px;

    .content-item {
      display: flex;
      flex-flow: column wrap;
      gap: 10px;
      justify-content: space-between;
      margin-top: 20px;

      .item-number {
        font-size: 14px;
        // white-space: nowrap;
        word-break: break-all;

        .px-tag {
          margin-left: 5px;
        }
      }

      .item-flex {
        display: flex;
        align-items: center;
      }

      .item-title {
        height: 21px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
      }

      .item-header {
        font-size: 14px;
        white-space: nowrap;
      }

      .content-item-left {
        display: flex;
        gap: 16px;

        .color-done {
          color: $colorDone;
        }

        .color-total {
          color: $colorTotal;
        }

        .content-icon {
          width: 44px;
          height: 44px;
        }

        .data-text {
          font-size: 22px;
          font-weight: 600;
          line-height: 1;
          white-space: nowrap;
        }

        .content-box {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .content-box-label {
            font-weight: 600;
            line-height: 1;
            color: #555;
            white-space: nowrap;
          }

          .content-box-data {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .echarts-chart-com {
    width: 100%;
    height: calc(100% - v-bind(title_height) - 110px);
    text-align: center;
    vertical-align: middle;
  }
}
</style>
